<template>
  <div class="wallet-box">
    <div class="top-box">
      <div class="wallet-cnt">
        <div class="bill-box" @click="goBill">账单</div>
        <div class="title">
          账户余额(元)
          <i class="iconfont icon-shouye_tishi" @click="showTips"></i>
        </div>
        <div class="money">{{wallet.accountFee | formatMoney}}</div>
        <div class="total">累计收益(元) +{{wallet.sumFee | formatMoney}}</div>
        <div class="action-btn" @click="gocash">提现</div>
      </div>
      <div class="today-box" v-if="+wallet.todayFee">
        <div class="title-box">
          <b>今日收益</b>
          <p>+{{wallet.todayFee | formatMoney}}</p>
        </div>
        <div class="item van-hairline--bottom">
          <div class="info">
            <p class="title">楼盘点击</p>
          </div>
          <div class="money">
            <p>
              <span v-show="+wallet.checkFee">+</span>
              {{wallet.checkFee | formatMoney}}
            </p>
            <p class="tips">共{{wallet.checkNum}}次</p>
          </div>
        </div>
        <div class="item van-hairline--bottom">
          <div class="info">
            <p class="title">楼盘浏览</p>
          </div>
          <div class="money">
            <p>
              <span v-show="+wallet.browseFee">+</span>
              {{wallet.browseFee | formatMoney}}
            </p>
            <p class="tips">共{{wallet.browseNum}}次</p>
          </div>
        </div>
        <div class="item van-hairline--bottom" v-show="showInvite || +wallet.invitationFee">
          <div class="info">
            <p class="title">邀请注册</p>
          </div>
          <div class="money">
            <p>
              <span v-show="+wallet.invitationFee">+</span>
              {{wallet.invitationFee | formatMoney}}
            </p>
            <p class="tips">共{{wallet.invitationNum}}人</p>
          </div>
        </div>
      </div>
      <div class="no-data" v-else>
        <img src="../../../assets/img/wx/nodata.png" alt />
        <p class="text">
          很遗憾，你今日还未获得收益～
          <br />还等什么呢，现在就去获取收益吧～
        </p>
        <div class="btn-box">
          <div class="btn" @click="goWrite">分享文章</div>
          <div class="btn" @click="goInvitation" v-show="showInvite">邀请好友</div>
        </div>
      </div>
    </div>
    <div class="bottom-box" v-show="+wallet.todayFee">
      <div class="tips">还在等什么呢，现在就去获取收益吧～</div>
      <div class="action-btn">
        <div class="goWrite btn" @click="goWrite">分享文章</div>
        <div class="invite btn" @click="goInvitation" v-show="showInvite">邀请好友</div>
      </div>
    </div>
    <van-popup v-model="showQrcode">
      <div class="qrcode-box">
        <p>关注AW大师公众号即可提现</p>
        <img :src="wallet.officialAccountImg" alt />
      </div>
    </van-popup>
  </div>
</template>

<script>
import wechatService from 'SERVICE/wechatService'
import RegisterService from 'SERVICE/registService'
export default {
  data() {
    return {
      wallet: {},
      showQrcode: false,
      qrcodeImg: '',
      attention: false,
      showInvite: false
    }
  },
  created() {
    this.agentMyWallet()
    // this.getOfficialAccountQrCode()
    this.attentionOfficialAccounts()
    this.getInvitationActivity()
  },
  methods: {
    getInvitationActivity() {
      wechatService
        .getInvitationActivity({})
        .then(res => {
          this.showInvite = res.invitationActivity
        })
        .catch()
    },
    agentMyWallet() {
      wechatService
        .agentMyWallet({})
        .then(res => {
          this.wallet = res
        })
        .catch()
    },
    showTips() {
      this.$toast('余额满10元才可提现哦～')
    },
    goBill() {
      this.$router.push('/money/bill')
    },
    gocash() {
      if (+this.wallet.accountFee < 1000) {
        return this.$toast('余额满10元才可提现哦～')
      }
      // 先关注公众号才能提现
      if (!this.attention) {
        return (this.showQrcode = true)
      }
      this.$router.push(`/money/cashout?withdrawPrice=${this.wallet.accountFee}`)
    },
    // 经纪人是否关注公众号
    attentionOfficialAccounts() {
      wechatService
        .attentionOfficialAccounts({})
        .then(res => {
          this.attention = res.attention
        })
        .catch()
    },
    goWrite() {
      this.$router.push('/write-article')
    },
    goInvitation() {
      this.$router.push('/wx/invite/activity')
    },
    // 获取微信公众号二维码
    getOfficialAccountQrCode() {
      let uuid = localStorage.getItem('uuid')
      let enterpriseId = localStorage.getItem('enterpriseId')
      RegisterService.getOfficialAccountQrCode({ uuid: uuid, enterpriseId: enterpriseId })
        .then(res => {
          this.qrcodeImg = res.qrCode
        })
        .catch()
    },
    goBack() {
      this.$router.replace({ path: '/dynamics' })
    }
  },
  filters: {
    formatMoney(val) {
      if (val) {
        return (val / 100).toFixed(2)
      }
      return '0.00'
    }
  },
  mounted() {
    if (window.history && window.history.pushState) {
      history.pushState(null, null, document.URL)
      window.addEventListener('popstate', this.goBack, false)
    }
  },
  destroyed() {
    window.removeEventListener('popstate', this.goBack, false)
  }
}
</script>

<style lang="less" scoped>
.wallet-box {
  display: flex;
  flex-direction: column;
  font-size: 12px;
  color: #13284d;
  .top-box {
    flex: 1;
    .wallet-cnt {
      height: 216px;
      background-image: url('../../../assets/img/wx/wallet-bg.png');
      background-size: 100% 216px;
      background-repeat: no-repeat;
      position: relative;
      color: #fff;
      text-align: center;
      margin: 8px 2px 0;
      .bill-box {
        position: absolute;
        right: 30px;
        top: 16px;
      }
      .title {
        padding-top: 36px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-weight: 400;
        i {
          font-size: 14px;
          opacity: 0.8;
          margin-left: 8px;
        }
      }
      .money {
        height: 50px;
        font-size: 36px;
        font-weight: 600;
        color: rgba(255, 255, 255, 1);
        line-height: 50px;
      }
      .action-btn {
        width: 152px;
        height: 34px;
        background: rgba(255, 255, 255, 1);
        box-shadow: 0px 2px 17px 0px rgba(110, 187, 255, 0.7);
        border-radius: 22px;
        margin: 28px auto 0;
        font-size: 16px;
        color: rgba(0, 122, 230, 1);
        line-height: 34px;
        text-align: center;
        font-weight: 600;
      }
    }
    .today-box {
      margin: 10px 16px;
      .title-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 12px;
        b {
          height: 28px;
          font-size: 20px;
          color: rgba(19, 40, 77, 1);
          line-height: 28px;
          font-weight: 500;
        }
        p {
          height: 22px;
          font-size: 16px;
          color: rgba(234, 77, 46, 1);
          line-height: 22px;
        }
      }
      .item {
        height: 65px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .info {
          .title {
            font-size: 16px;
          }
        }
        .money {
          font-size: 14px;
          color: #e02020;
          text-align: right;
          .tips {
            font-size: 12px;
            color: #9ca5b5;
            margin-top: 4px;
          }
        }
      }
    }
    .no-data {
      text-align: center;
      padding: 32px 0 24px;
      img {
        width: 229px;
        height: 138px;
      }
      .text {
        width: 240px;
        font-size: 14px;
        line-height: 20px;
        margin: 24px auto;
        color: #9ca5b5;
      }
      .btn-box {
        margin: 24px 96px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        .btn {
          flex: 1;
          width: 80px;
          height: 32px;
          border: 1px solid rgba(0, 122, 230, 1);
          border-radius: 16px;
          font-size: 14px;
          color: #007ae6;
          text-align: center;
          line-height: 32px;
          &:nth-child(2) {
            margin-left: 20px;
          }
        }
      }
    }
  }
  .bottom-box {
    margin: 20px;
    .tips {
      height: 20px;
      font-size: 12px;
      font-weight: 400;
      color: rgba(156, 165, 181, 1);
      line-height: 20px;
      text-align: center;
    }
    .action-btn {
      margin-top: 8px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .btn {
        flex: 1;
        height: 42px;
        border: 1px solid rgba(0, 122, 230, 1);
        border-radius: 6px;
        font-size: 16px;
        color: #007ae6;
        text-align: center;
        line-height: 42px;
        &:nth-child(2) {
          margin-left: 20px;
        }
      }
    }
  }
  .qrcode-box {
    padding: 20px;
    line-height: 20px;
    img {
      margin-top: 10px;
    }
  }
}
</style>